<template>
	<gracePage headerBG="#FFFFFF" >
		<view slot="gHeader" class="grace-bg-white">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">添加地址</text></view>
				<!-- 消息按钮 -->
				<text class="grace-header-icons"></text>
			</view>
		</view>
		<view slot="gBody" class="grace-body">
			<form @submit="formSubmit" class="grace-form grace-margin-top">
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">您的姓名</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" name="name" placeholder="请填写联系姓名"></input>
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">联系电话</text>
					<view class="grace-form-body">
						<input type="number" class="grace-form-input" name="phoneno" placeholder="请填写联系电话"></input>
					</view>
				</view>
				<view class="grace-form-item grace-border-b">
					<text class="grace-form-label">所在地区</text>
					<view class="grace-form-body" @tap="openPicker">
						<input type="text" class="grace-form-input" name="area" :value="area" disabled placeholder="请选择所在地区"></input>
					</view>
				</view>
				<view class="grace-form-item">
					<text class="grace-form-label">详细地址</text>
					<view class="grace-form-body">
						<input type="text" class="grace-form-input" name="address" placeholder="请填写详细地址"></input>
					</view>
				</view>
				<view>
					<graceCheckBtn :checked="selected" :parameter="[1,2,3]" :size="46" @change="checkedChange">
						<view class="grace-nowrap grace-flex-vcenter">
							<text class="grace-text">默认地址</text>
							<text class="grace-text-small pl-1 grace-black9">(选中后在提交订单也将自动填入)</text>
						</view>
					</graceCheckBtn>
				</view>
				<view style="height: 180rpx;"></view>
				<view class="mx-2">
					<button formType="submit" type="primary" class="grace-button grace-border-radius">确认</button>
				</view>
				<graceAddressPicker :show="graceAddressPickerShow" @confirm="pickerConfirm" @close="closePicker" cancelTColor="关闭"></graceAddressPicker>
			</form>
		</view>
	</gracePage>
</template>
<script>
import gracePage from "@/graceUI/components/gracePage.vue";
import graceAddressPicker from '@/components/myVue/graceAddressPicker.vue';
import graceCheckBtn from "@/graceUI/components/graceCheckBtn.vue";
var  graceChecker = require("@/graceUI/jsTools/graceChecker.js");
import { mapState } from 'vuex';
export default {
    data() {
    	return {
			graceAddressPickerShow : false,
			area:'',
			selected : false,
			defaults:false,
			siteMap:{}
		};
    },
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo
		})
	},
	created() {
		this.__init();
	},
	methods:{
		async __init() {
			// this.graceFullLoading = true
		
		},
		openPicker : function () {
			this.graceAddressPickerShow = true;
		},
		navigateBackFn(){
			// 返回上一个页面并传参
			uni.$emit("submitInfo",{result:1002});
			uni.navigateBack();
		},
		pickerConfirm : function(e){
			var text = '',arr = [];
			for (let obj in e) {
				text = text + e[obj].region_name+' ';
				arr.push(e[obj].region_id)
			}
			this.siteMap = arr;
			this.area = text;
			this.closePicker();
		},
		checkedChange : function (e) {
			console.log(e,e[0]);
			this.defaults = e[0];
		},
		closePicker : function () {
			this.graceAddressPickerShow = false;
		},
		// 表单提交
		async formSubmit(e){
			var rule = [
				{ name: "name", checkType: "string", checkRule: "1,10", errorMsg: "联系人应为1-20个字符" },
				{ name: "phoneno", checkType: "phoneno", checkRule: "", errorMsg: "请正确填写手机号" },
				{ name: "area", checkType: "string", checkRule: "1,100", errorMsg: "请选择所在地区" },
				{ name: "address", checkType: "string", checkRule: "5,100", errorMsg: "请正确填写详细地址" }
			];
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if(checkRes){
				// uni.showToast({title:"验证通过! 请观察控制台", icon:"none"});
				let options = {
					user_id:this.userInfo.user_id || '',
					token:this.userInfo.token || '',
					consignee:formData.name,
					mobile:formData.phoneno,
					province:this.siteMap[0],
					city:this.siteMap[1],
					district:this.siteMap[2],
					address:formData.address,
					defaults: this.defaults ? 1 : 0,
					act:'set_address', 
				}
				let data = await this.$HTTP.postStatus('/api/api.php', options);
				// 返回上一个页面并传参
				uni.$emit("submitInfo",data);
				// 添加成功回退到列表页
				uni.navigateBack();
			}else{
				uni.showToast({ title: graceChecker.error, icon: "none" });
			}
		},
	},
	components:{gracePage, graceAddressPicker,graceCheckBtn}
}
</script>
<style>
	.grace-form-input{
		text-align:left;
	}
</style>